@import "../../common/style/var.less";
.roof{
  position: fixed;
  z-index: 10;
  width: 375px;
  top:0;
  left:0;
}
.top{
  background-image: @main-bg;
  color: @font-light;
}
.capsule{
  position: relative;
  width: 375px;
  background-image: @main-bg;
  color: @font-light;
  font-size: @font-size-title;
  text-align: center;
  .title{
    width: 150px;
    height: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .router-handle{
    position: absolute;
    left: 10px;
    top:50%;
    transform: translateY(-50%);
    border-radius: 20px;
    background: rgba(0,0,0,.2);
    border:1px solid rgba(255,255,255,.2);
    box-sizing: border-box;
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 1px;
      height: 50%;
      background: rgba(255,255,255,.4);
    }
    div{
      position: relative;
      width: 50%;
      height: 100%;
      float: left;
      i{
        display: inline;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
      }
    }
  }
}
